<template>
    <div>
        <!-- 修改用户信息 -->
        <el-dialog
            v-model="dialogFormInvisible"
            title="修改用户"
        >
            <el-form
                label-width="100px"
                style="max-width: 460px"
                :rules="rules"
                :model="changeUserform"
                v-model="changeUserform.value"
                ref="changeUserRef"
            >
                <el-form-item label="用户名">
                    <el-input disabled :placeholder="changeUserform.value.username"/>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="changeUserform.value.password" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="changeUserform.value.email" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="emit('changeUserCancel')">取消</el-button>
                    <el-button type="primary" @click="revise">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { reactive } from 'vue-demi'
import { ref, defineProps, defineEmits } from 'vue'
import request from '@/utils/request.js'


const props = defineProps({
    dialogFormInvisible:{
        type:Boolean,
        default:false,
    },
    changeUserform:{
        type:Object,
        default:function(){
            return {}
        }
    }
})
const changeUserRef = ref(null)

const rules = {
    addFormRules: {
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            {
                min: 6,
                max: 15,
                message: '长度在 6 到 15 个字符',
                trigger: 'blur',
            },
        ],
        email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        {
            pattern: /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/,
            message: '邮箱格式不正确',
            trigger: 'blur',
        },
        ],
    },
}

const emit = defineEmits(['changeUserCancel'])

const revise = function(){
    const item = props.changeUserform.value
    const newUserform =reactive({
        userId: item.userId,
        username: item.username,
        password: item.password,
        teamName: '',
        teamMembers: '',
        email: item.email,
    })
    changeUserRef.value.validate(async function(valid){
        if(!valid) return
        const {data} = await request.put(`user/update/${newUserform.userId}`,{...newUserform})
        emit('changeUserCancel')
        if(data.code === 200){
            ElMessage.success('添加用户成功')
        }
    })
}


</script>

<style>

</style>